<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>SOR查看</title>
    <!-- <link href="lib/css/meterial-icons.css" rel="stylesheet"> -->
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    
    <style type="text/css">
      [v-cloak] { display: none }
      div.q-field-vertical .q-field-label+.q-field-content { padding-top: 0!important }
      .q-item-sublabel { color: #bdbdbd }
      .search-group-left { font-size: 13px; border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 3px 0 0 3px; border-right: none }
      .search-group-right { font-size: 13px;border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 0 3px 3px 0 }
    </style> 
  </head>
  <body>
    <div id="q-sorPreview" v-cloak class="q-pa-sm">
      <q-layout>
        <q-page-container>
          <q-tabs inverted color="primary">
            <q-tab default slot="title" name="base" label="基本信息"></q-tab>
            <q-tab slot="title" name="details" label="行项目"></q-tab>
            <q-tab slot="title" name="plan" label="计划"></q-tab>

            <q-tab-pane name="base">
              <div class="row justify-start gutter-x-sm gutter-y-xs q-pb-md q-px-sm" style="font-size:13px">
                <q-field 
                  label="SOR编码："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.erpCode"></q-input>
                </q-field>
                <q-field 
                  label="SOR名称："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.name"></q-input>
                </q-field>
                <q-field 
                  label="SOR类型："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.projectType"></q-input>
                </q-field>
                <q-field 
                  label="项目编码："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.projectCode"></q-input>
                </q-field>
                <q-field 
                  label="项目名称："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.projectName"></q-input>
                </q-field>
                <q-field 
                  label="项目计划结束时间："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.projectStartTime"></q-input>
                </q-field>
                <q-field 
                  label="项目计划开始时间："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.projectEndTime"></q-input>
                </q-field>
                <q-field 
                  label="要求定点时间："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.requiredFinishTime"></q-input>
                </q-field>
                <q-field 
                  label="申请人："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.proposerName"></q-input>
                </q-field>
                <q-field 
                  label="申请公司："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.companyName"></q-input>
                </q-field>
                <q-field 
                  label="申请部门："
                  orientation="vertical"
                  class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    v-model="baseInfoForm.depName"></q-input>
                </q-field>
                <q-field 
                  label="说明："
                  orientation="vertical"
                  class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <q-input
                    readonly  
                    hide-underline
                    type="textarea"
                    rows="5"
                    style="border: 1px solid #ccc"
                    v-model="baseInfoForm.remark"></q-input>
                </q-field>
              </div>
            </q-tab-pane>
            <q-tab-pane name="details">
              <q-table
                class="no-shadow q-mb-md"
                :data="viewData"
                dense
                :columns="columns"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading="listLoadingDetails"
                :selected.sync="selected"
                :pagination.sync="serverPagination"
                row-key="id"
                @request="detailsDataGet"
              >
                <template slot="top-right" slot-scope="props">
                  <q-input 
                    class="search-group-left"
                    hide-underline
                    placeholder="输入名称、编码"
                    v-model.trim="searchForm.value"></q-input>
                  <q-select 
                    class="search-group-right"
                    hide-underline
                    radio
                    :options="[{ label:'名称', value: 'matName' }, { label:'编码', value: 'matCode' }]"
                    v-model="searchForm.key"></q-select>
                  <q-btn
                    size="sm"
                    color="primary"
                    :loading="btnLoadingSearch"
                    @click="searchDetails"
                    class="q-ml-sm q-pa-sm">
                    <span slot="loading">
                      <q-spinner-hourglass></q-spinner-hourglass>
                      搜索中
                    </span>
                    <q-icon name="search"></q-icon>
                    <span>{{ $t('查询') }}</span>
                  </q-btn>
                  <q-btn
                    size="sm"
                    color="secondary"
                    @click="resetDetails"
                    :loading="btnLoadingReset"
                    class="q-ml-sm q-pa-sm">
                    <span slot="loading">
                      <q-spinner-hourglass></q-spinner-hourglass>
                      重置中
                    </span>
                    <q-icon name="refresh" ></q-icon>
                    <span>{{ $t('重置') }}</span>
                  </q-btn>
                </template>
                <template slot="top-left" slot-scope="props">
                  <q-btn
                    color="primary"
                    outline
                    size="xs"
                    label="发起RFQ"
                    @click="startRFQ"
                    v-if="baseInfoForm.status == 1"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    v-if="baseInfoForm.status == 1"
                    color="primary"
                    outline
                    size="xs"
                    label="维护目标价"
                    @click="targetPriceChange"
                    class="q-mr-sm"></q-btn>
                </template>
                <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  第
                  <q-pagination
                    v-model="serverPagination.page"
                    input
                    boundary-links
                    direction-links
                    color="primary"
                    :max-pages="5"
                    :ellipses="true"
                    :max="pages"></q-pagination>
                  页 &nbsp; 共 {{ total }} 条
                </div>
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="itemNo" :props="props" >
                      {{ props.row.itemNo }}
                    </q-td>
                    <q-td key="matCode" :props="props" >
                      {{ props.row.matCode }}
                    </q-td>
                    <q-td key="matName" :props="props" >
                      {{ props.row.matName }}
                    </q-td>
                    <q-td key="matCategoryName" :props="props" >
                      {{ props.row.matCategoryName }}
                    </q-td>
                    <q-td key="costEngineerUserName" :props="props" >
                      {{ props.row.costEngineerUserName }}
                    </q-td>
                    <q-td key="quantity" :props="props" >
                      {{ props.row.quantity }}
                    </q-td>
                    <q-td key="carQuantity" :props="props" >
                      {{ props.row.carQuantity }}
                    </q-td>
                    <q-td key="unitName" :props="props" >
                      {{ props.row.unitName }}
                    </q-td>
                    <q-td key="targetPrice" :props="props" >
                      {{ props.row.targetPrice }}
                    </q-td>
                    <q-td key="currencyName" :props="props" >
                      {{ props.row.currencyName }}
                    </q-td>
                    <q-td key="rfqId" :props="props" >
                      <q-chip v-if="props.row.rfqId" dense square color="positive">已发起</q-chip>
                      <q-chip v-else dense square color="dark">未发起</q-chip>
                    </q-td>
                  </q-tr>
                </template>
              </q-table>
            </q-tab-pane>
            <q-tab-pane name="plan">
              <q-table
                class="no-shadow q-mb-md"
                :data="planData"
                dense
                :columns="columnsPlan"
                :loading="listLoadingPlan"
                :pagination.sync="pagination"
                hide-bottom
                row-key="id"
              >
                <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  <q-pagination
                    v-model="pagination.page"></q-pagination>
                </div>
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td key="stepName" :props="props" >
                      {{ props.row.stepName }}
                    </q-td>
                    <q-td key="planStartTime" :props="props">
                      <q-btn 
                        no-ripple 
                        outline 
                        dense
                        v-if="props.row.planStartTime"
                        color="info">{{ props.row.planStartTime }}</q-btn>
                      <q-btn 
                        no-ripple 
                        outline 
                        v-else
                        dense
                        color="info">未填写</q-btn>
                    </q-td>
                    <q-td key="planEndTime" :props="props">
                      <q-btn 
                        no-ripple 
                        outline 
                        dense
                        v-if="props.row.planEndTime"
                        color="faded">{{ props.row.planEndTime }}</q-btn>
                      <q-btn 
                        no-ripple 
                        outline 
                        v-else
                        dense
                        color="faded">未填写</q-btn>
                    </q-td>
                    <q-td key="realStartTime" :props="props" >
                      <q-btn 
                        no-ripple 
                        outline 
                        dense
                        v-if="props.row.realStartTime"
                        color="info">{{ props.row.realStartTime }}</q-btn>
                      <q-btn 
                        no-ripple 
                        outline 
                        v-else
                        dense
                        color="info">暂无</q-btn>
                    </q-td>
                    <q-td key="realEndTime" :props="props" >
                      <q-btn 
                        no-ripple 
                        outline 
                        dense
                        v-if="props.row.realEndTime"
                        color="faded">{{ props.row.realEndTime }}</q-btn>
                      <q-btn 
                        no-ripple 
                        outline 
                        v-else
                        dense
                        color="faded">暂无</q-btn>
                    </q-td>
                  </q-tr>
                </template>
              </q-table>
            </q-tab-pane>
          </q-tabs>
          <q-page-sticky position="top-right" :offset="[42, 26]">
            <q-fab
              color="primary"
              icon="keyboard_arrow_down"
              direction="left"
            >
              <q-fab-action 
                color="secondary" 
                @click="window.location.href = 'sorManage.html'"
                icon="arrow_back">
                <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">返回</q-tooltip>
              </q-fab-action>
              <q-fab-action 
                color="primary" 
                @click="actitive"
                v-if="baseInfoForm.status != 1"
                icon="save">
                <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">激活</q-tooltip>
              </q-fab-action>
            </q-fab>
          </q-page-sticky>
        </q-page-container>
      </q-layout>
      <q-modal no-backdrop-dismiss v-model="priceChangeModal" :content-css="{minWidth: '44vw', minHeight: '400px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              <span>维护目标价</span>
            </q-toolbar-title>
            <q-btn flat @click="priceChangeModal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
          <q-card class="bg-white no-shadow full-width">
            <q-card-main class="row justify-center gutter-x-md gutter-y-xs">
              <q-field 
                label="目标价"
                orientation="vertical"
                :error="$v.targetPriceForm.targetPrice.$error"
                :error-label="$v.targetPriceForm.targetPrice.required? '请输入数字': '该字段为必填项'"
                class="col-lg-10 col-md-10 col-sm-6 col-xs-12 q-mt-sm">
                <q-input 
                  @blur="$v.targetPriceForm.targetPrice.$touch"
                  v-model="targetPriceForm.targetPrice" ></q-input>
              </q-field>
            </q-card-main>
          </q-card>
          <q-toolbar slot="footer" color="white" class="row justify-end">
            <q-btn
              glossy
              :loading="btnLoading"
              color="primary"
              size="sm"
              @click="priceChangeConfirm">{{$t("保存")}}</q-btn>
            <q-btn
              glossy
              color="secondary"
              size="sm"
              class="q-ml-sm"
              @click="priceChangeModal = false">{{$t("取消")}}</q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance2.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sor/sorPreview.js"></script>
    <!--  -->
    <script src="../script/utils.js"></script>

    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])

      Vue.prototype.window = window
      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var required = window.validators.required
      var email = window.validators.email
      var helpers = window.validators.helpers
      var mustNumber = function(value) {
        return /^\d+(\.\d+)?$|^$/.test(value) || !helpers.req(value)
      }

      var sorPreview = new Vue({
        el: '#q-sorPreview',
        i18n: i18n,
        data: function () {
          return {
            currentId: '',
            dateUpdate: '2018-10-08',
            priceChangeModal: false,
            btnLoading: false,
            listLoading: false,  // 表单加载状态 通用
            // 基本信息
            baseInfoForm: {
              erpCode: '',
              name: '',
              projectType: '',
              projectCode: '',
              projectName: '',
              projectStartTime: '',
              projectEndTime: '',
              requiredFinishTime: '',
              proposerName: '',
              companyName: '',
              depName: '',
              remark: ''
            },
            // 行项目
            btnLoadingSearch: false,
            btnLoadingReset: false,
            searchForm: {
              value: '',
              key: 'matName'
            },
            viewData: [],  // 数据
            total: 0,   // 总条数
            listLoadingDetails: false,  // 表单加载状态 通用
            selected: [],  // 已选择行
            serverPagination: {
              page: 1,
              rowsNumber: 5,
              rowsPerPage: 10
            },
            // 计划
            listLoadingPlan: false,
            planData: [],
            pagination: {
              page: 1,
              rowsPerPage: 0
            },
            // 维护目标价
            targetPriceForm: {
              targetPrice: ''
            }
          }
        },
        validations: {
          targetPriceForm: {
            targetPrice: { required: required, mustNumber: mustNumber }
          }
        },
        computed: {
          columns: function() {
            return [
              {
                name: 'itemNo',
                label: '行号',
                align: 'center'
              },
              {
                name: 'matCode',
                label: '零件编码',
                align: 'center'
              },
              {
                name: 'matName',
                label: '零件名称',
                align: 'center'
              },
              {
                name: 'matCategoryName',
                label: '品类',
                align: 'center'
              },
              {
                name: 'costEngineerUserName',
                label: '成本工程师',
                align: 'center'
              },
              {
                name: 'quantity',
                label: '需求数量',
                align: 'center'
              },
              {
                name: 'carQuantity',
                label: '单车用量',
                align: 'center'
              },
              {
                name: 'unitName',
                label: '单位',
                align: 'center'
              },
              {
                name: 'targetPrice',
                label: '目标含税单价',
                align: 'center'
              },
              {
                name: 'currencyName',
                label: '货币',
                align: 'center'
              },
              {
                name: 'rfqId',  // 有值 为已发起  无值  为未发起
                label: 'RFQ状态',
                align: 'center'
              }
            ]
          },
          pages: function() {
            return Math.ceil(this.total / this.serverPagination.rowsPerPage)
          },
          searchIcon: function() {
            var that = this
            return [
              {
                icon: 'clear',
                content: true,
                handler: function() {
                  
                }
              }
            ]
          },
          columnsPlan: function() {
            return [
              {
                name: 'stepName',
                label: '阶段名称',
                align: 'center'
              },
              {
                name: 'planStartTime',
                label: '计划开始时间',
                align: 'center'
              },
              {
                name: 'planEndTime',
                label: '计划结束时间',
                align: 'center'
              },
              {
                name: 'realStartTime',
                label: '实际开始时间',
                align: 'center'
              },
              {
                name: 'realEndTime',
                label: '实际结束时间',
                align: 'center'
              }
            ]
          }
        },
        created: function () {
          var args = GetRequest()
          this.currentId = args.id
          this.baseInfoDataGet(this.currentId)
          this.detailsDataGet({
            pagination: this.serverPagination
          })
          this.planDataGet(this.currentId)
        },
        watch: {
          
        },
        methods: {
          // 获取 基本信息
          baseInfoDataGet: function(currentId) {
            var that = this
            axios({
              method: 'post',
              url: '/manager/sor/main/getMainInfo/' + currentId,  // TODO:
            })
            .then(function(data) {
              var data = data.data
              that.baseInfoForm = {
                erpCode: data.erpCode,
                name: data.name,
                projectType: data.projectType,
                projectCode: data.projectCode,
                projectName: data.projectName,
                projectStartTime: data.projectStartTime,
                projectEndTime: data.projectEndTime,
                requiredFinishTime: data.requiredFinishTime,
                proposerName: data.proposerName,
                companyName: data.companyName,
                depName: data.depName,
                remark: data.remark,
                status: data.status
              }
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 获取 明细
          detailsDataGet: function(arg) {
            this.listLoading = true
            this.serverPagination = arg.pagination
            var that = this
            axios({
              method: 'post',
              url: '/manager/sor/item/query',
              data: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : null),
                search_LIKE_matName: this.searchForm.key == 'matName'? this.searchForm.value: '',
                search_LIKE_matCode: this.searchForm.key == 'matCode'? this.searchForm.value: '',
                search_EQ_headerId: this.currentId
              }
            })
            .then(function(data) {
              that.viewData = data.rows
              that.total = data.total
              that.listLoading = false
              that.btnLoadingSearch = false
              that.btnLoadingReset = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 明细 查询
          searchDetails: function() {
            this.btnLoadingSearch = true
            this.detailsDataGet({
              pagination: this.serverPagination
            })
          },
          resetDetails: function() {
            this.btnLoadingReset = true
            this.searchForm = {  
              value: '',
              key: 'matName'
            }
            this.detailsDataGet({
              pagination: this.serverPagination
            })
          },
          // 发起rfq
          startRFQ: function() {
            var that = this
            if (this.selected.length > 0) {
              var _arr = [], _count = 0
              this.selected.map(function(s) {
                if (s.rfqId == null) {
                  _arr.push(s)
                } else {
                  _count++
                }
              })
              if (_count > 0) {
                this.$q.dialog({
                  title: '警告',
                  message: '所选项中包含已发起RFQ物料，需要为您过滤掉这些物料吗？',
                  ok: {
                    label: '好的',
                    flat: true,
                    color: 'primary'
                  },
                  cancel: {
                    label: '不,谢谢',
                    flat: true,
                    color: 'primary'
                  }
                })
                .then(function() {
                  that.selected = _arr
                })
                .catch(function() {
                })
              } else {
                this.$q.dialog({
                  title: '确认',
                  message: '您将跳转至RFQ新增页面，完成基本信息填写后，系统将自动带入您已勾选的明细信息！',
                  ok: {
                    label: '确认',
                    flat: true
                  },
                  cancel: {
                    label: '取消',
                    flat: true
                  }
                })
                .then(function() {
                  var idSelected = []
                  that.selected.forEach(function(e) {
                    idSelected.push(e.id)
                  })
                  window.location.href = './rfxPurAdd.html?addOrEdit=1&ids='+ idSelected.join(',')
                })
                .catch(function() {
                  // 选择"Cancel"或作了关闭操作
                })
              }
            } else {
              this.$q.notify({
                message: '请先勾选，再执行该操作！',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          // 获取 计划
          planDataGet: function(currentId) {
            var that = this
            axios({
              method: 'post',
              url: '/manager/sor/plan/getByHeaderId/' + this.currentId,  // TODO:
            })
            .then(function(data) {
              var _data = []
              data.data.forEach(function(item) {
                var _obj = {}
                _obj.headerId = item.headerId
                _obj.id = item.id
                _obj.itemNo = item.itemNo
                _obj.stepName = item.stepName
                _obj.stepCode = item.stepCode
                _obj.planStartTime = item.planStartTime
                _obj.planEndTime = item.planEndTime
                _obj.realStartTime = item.realStartTime
                _obj.realEndTime = item.realEndTime
                _data.push(_obj)
              })
              that.planData = _data
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 激活
          actitive: function() {
            var that = this
            this.$q.dialog({
              title: '确认',
              message: '确定要为该条信息执行激活操作吗？',
              ok: {
                label: '确定',
                flat: true,
                color: 'primary'
              },
              cancel: {
                label: '取消',
                flat: true,
                color: 'primary'
              }
            })
            .then(function() {
              axios({
                method: 'post',
                url: '/manager/sor/main/active',
                data: {
                  ids: that.currentId
                }
              })
              .then(function(data) {
                if (data.success) {
                  that.$q.notify({
                    message: '操作成功',
                    type: 'positive',
                    icon: 'done',
                    timeout: 1000,
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: data.msg,
                    type: 'negative',
                    icon: 'error_outline',
                    timeout: 1000,
                    position: 'top-right'
                  })
                }
                that.baseInfoDataGet(that.currentId)
                that.detailsDataGet({
                  pagination: that.serverPagination
                })
                that.planDataGet(that.currentId)
              })
              .catch(function(err) {
                console.log(err)
              })
            })
            .catch(function() {

            })
          },
          targetPriceChange: function() {
            if (this.selected.length > 0) {
              this.targetPriceForm = {
                targetPrice: ''
              }
              this.priceChangeModal = true
            } else {
              this.$q.notify({
                message: '请先勾选，再执行该操作',
                type: 'warning',
                icon: 'warning',
                timeout: 1000,
                position: 'top-right'
              })
            }
          },
          priceChangeConfirm: function() {
            var that = this
            this.$v.targetPriceForm.$touch()
            if (!this.$v.targetPriceForm.$error) {
              var idSelected = []
              this.selected.forEach(function(e) {
                idSelected.push(e.id)
              })
              this.btnLoading = true
              axios({
                method: 'post',
                url: '/manager/sor/item/updateTargetPrice',
                data: {
                  ids: idSelected.join(','),
                  targetPrice: this.targetPriceForm.targetPrice
                }
              })
              .then(function(data) {
                if (data.success) {
                  that.$q.notify({
                    message: '操作成功',
                    type: 'positive',
                    icon: 'done',
                    timeout: 1000,
                    position: 'top-right'
                  })
                  that.btnLoading = false
                  that.priceChangeModal = false
                  that.detailsDataGet({
                    pagination: that.serverPagination
                  })
                } else {
                  that.$q.notify({
                    message: data.msg,
                    type: 'negative',
                    icon: 'error_outline',
                    timeout: 1000,
                    position: 'top-right'
                  })
                }
              })
              .catch(function(err) {
                console.log(err)
              })
            }
          }
        }
      })
    </script>
  </body>
</html>